<template>
    <div class="navigate">
        <grid>
        <grid-item  v-for="(item, index) in nav" :key="index" :link="item.link">
            <span slot="label"> {{ item.title }} </span>
        </grid-item>
        </grid>
    </div>
</template>

<script>
import { Grid, GridItem } from 'vux'
export default {
    name: 'Navigate',
    data(){
        return {
            nav: [{
                title: '学员端',
                link: { path: '/login/0' }
            }, {
                title: '教练端',
                link: { path: '/login/1' }
            }]
        }
    },
    components: {
        Grid,
        GridItem
    }
}
</script>

<style scoped lang="less">
.navigate {
    background: #fff;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /deep/ .weui-grids {
        width: 100%;

        /deep/ .weui-grid {
            background: #50d084;
        }
        
        /deep/ .weui-grid__label {
            font-size: 1.4em;
        }
    }
}
.grid-center {
    display: block;
    text-align: center;
    color: #666;
}
.weui-grids {
    background-color: #fff;
}
</style>
